<template>
  <div id="app">
    <el-table :data="resData.records">
      <el-table-column v-for="item in labelColumn"
                       :key="item.prop"
                       :prop="item.prop"
                       :label="item.label"
                       :width="item.width">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="queryGoods.page"
                   :page-sizes="[3, 5, 10]"
                   :page-size="resData.size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="resData.total">
    </el-pagination>
  </div>
</template>

<script>


export default {
  data () {
    return {
      resData: {},
      queryGoods: {
        page: 1,
        size: 5
      },
      labelColumn: [
        {
          prop: 'id',
          label: '序号',
          width: '50'
        },
        {
          prop: 'goodName',
          label: '商品名称',
          width: '200'
        },
        {
          prop: 'price',
          label: '售价',
          width: '100'
        },
        {
          prop: 'sellPrice',
          label: '销售价',
          width: '100'
        }
      ]
    }
  },
  created () {
    this.queryList()
  },
  methods: {
    handleSizeChange (val) {
      this.queryGoods.size = val;
      this.queryList()

    },
    handleCurrentChange (val) {
      this.queryGoods.page = val;
      this.queryList()
    },
    queryList () {
      var that = this;
      this.axios.post('/goods/queryList', this.queryGoods).then((res) => {
        that.resData = res.data;
      })
    }
  }
}
</script>

<style lang="less">
#app {
  margin: 0px;
}
</style>
